const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 导出一个对象，通过导出对象的属性，就可以完成配置对象
module.exports = {
    //添加一个entry属性，这个属性的作用就是指定webpack打包入口文件的路径,entry属性如果是相对路径的话，./是不可省略的，
    entry: './src/main.js',
    // output属性设置输出文件的位置，这个属性的值要求是一个对象
    output: {
        filename:'js/[name].bundle.js',          // 指定输出文件的名称
        path: path.join(__dirname,'dist')        // path属性指定我们输出这个文件所在的目录
    },
    devServer: {
        contentBase: './dist'
    },
    module: {
        // 在module属性当中添加一个rules的数组，这个数组就是我们针对其他模块资源加载的一个配置，
        rules: [
            {
                test:/\.vue$/,         //是一个正则表达式，用来去匹配我们在打包过程当中所遇到的文件路径，
                use: ['vue-loader']    //用来去匹配文件使用的loader
            },
            {
                test:/\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use:['css-loader', 'less-loader']
                })
            },
            {
                test:/\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use:['css-loader', 'less-loader']
                })
            },
            {
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                use: ['url-loader']
            },
            {
                test:/.png$/,
                use: {
                  loader: 'url-loader',        // 支持通过配置选项的方式来去实现最佳实现方式，修改为一个对象
                  options: {
                    esModule: false,
                    limit: 10 * 1024      //10KB        10KB以下的文件交给url-loader，以上的还是交给file-loader
                  }
                }
              }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),         // 自动清除目录
        new HtmlWebpackPlugin({          // 生成一个HTML文件
            title:'webpackVue',
            filename: 'index.html',
            template: './public/index.html',
        }),
        new VueLoaderPlugin(),
        new ExtractTextPlugin('css/style.css')         //从一个或多个包中提取文本到单独的文件中
    ],
    resolve: {     // 配置模块如何解析
        extensions: ['*', '.js', '.vue', '.json'],
        alias: {                 // 创建 import 或 require 的别名，来确保模块引入变得更简单
            '@': path.resolve(__dirname,'src')        
        }
    }
}